import React from 'react'
import {GET} from '../com/send'
class adduser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []};
    }

    componentDidMount() {
        GET("/api/role/list").then((resp) => {
            if (resp.code === 0) {
                this.setState({data: resp.data});
            }
        })
    }

    createRoleItem(item) {
        console.info(item);
        return (
            <label className="checkbox-inline"  key={item.id}>
                <input type="checkbox" value={item.id}/>{item.role}
            </label>
        );
    }

    showRoleItem(data) {
        return data.map((item) => this.createRoleItem(item));
    }

    createRoleLayout(data) {
        return (
            <div className="row">
                <div className="col-md-4">
                    <div className="form-group">
                        <label htmlFor="exampleInputPassword1">*用户角色</label>
                        <div>
                            {this.showRoleItem(data)}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    render() {
        return (
            <div>
                <div className="page-header">
                    <h1>用户管理</h1>
                </div>
                <div className="panel panel-default">
                    <div className="panel-heading">
                        <h3 className="panel-title">添加用户</h3>
                    </div>
                    <div className="panel-body pbodytable">
                        <form>
                            <div className="row">
                                <div className="col-md-4">
                                    <div className="form-group">
                                        <label htmlFor="nameInput">*用户名</label>
                                        <input type="text" name="name" className="form-control" id="nameInput"
                                               placeholder="请输入用户名"/>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-4">
                                    <div className="form-group">
                                        <label htmlFor="emailInput">*邮箱</label>
                                        <input type="email" name="email" className="form-control" id="emailInput"
                                               placeholder="请输入用户邮箱"/>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-4">
                                    <div className="form-group">
                                        <label htmlFor="passwordInput">*密码</label>
                                        <input type="password" name="password" className="form-control"
                                               id="passwordInput" placeholder="请为用户设置密码"/>
                                    </div>
                                </div>
                            </div>
                            {this.createRoleLayout(this.state.data)}
                            <div className="row">
                                <div className="col-md-4">
                                    <button type="button" className="btn btn-success" id="doAdd">提交</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        );
    }
}
export default adduser;